<template>
	<view>
		<view style="width:100%;height:100upx"></view>
		<view class="logo">
			<image :src="cdnUrl+'/logo.png'" mode="aspectFill"></image>
		</view>
		<view class="ring">

			<view class="loginForm">

				<view class="title">{{projectName}}员工登录</view>

				<u-tabs :list="typeList" lineWidth="150" lineColor="#004ea2" @click="changeType"
					:scrollable="false"></u-tabs>
				<view class="passwordLogin" v-show="type==1">
					<input type="text" style="width: 0; height: 0; position: absolute; z-index: -1;" />

					<input type="password" style="width: 0; height: 0; position: absolute; z-index: -1;" />
					<view class="wq-row">
						手机号
						<input type="text" v-model="phone" autocomplete="off" placeholder="请输入手机号"></input>
					</view>

					<view class="wq-row">
						密&nbsp&nbsp&nbsp&nbsp码
						<input type="password" v-model="password" autocomplete="off" placeholder="请输入密码"></input>
					</view>
					<view class="wq-row">
						滑动
						<view class="verify"><wq-verify @blockSuccess="canLogin=true" ref="loginVer"></wq-verify></view>
					</view>
					<view class="wq-row">
						<button class="wq-btn" style="width:100%;" @tap="passwordLogin">登录</button>
					</view>
				</view>
				<view class="passwordLogin verifyLogin" v-show="type==2">
					<view class="wq-row">
						手机号
						<input type="text" autocomplete="off" v-model="phone" placeholder="请输入用户名"></input>
					</view>
					<view class="wq-row">
						滑动
						<view class="verify"><wq-verify @blockSuccess="changeCodeSend"></wq-verify></view>
					</view>
					<view class="wq-row">
						验证码
						<input type="text" autocomplete="off" class="codeIpt" v-model="code" placeholder="验证码"></input>
						<view>
							<u-toast ref="uToast"></u-toast>
							<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
							<view class="wqLButton" @tap="getCode">{{tips}}</view>
						</view>
					</view>
					<view class="wq-row">
						<button class="wq-btn" style="width:100%;" @tap="verifyLogin">登录</button>
					</view>

					
				</view>
				<view class="forget" @tap="toNav('/pages/login/forget')">忘记密码？</view>
			</view>
		</view>
	</view>
</template>

<script>
	import helper from '../../common/helper';
	import api from '@/api.js'
	export default {
		mixins: [helper],
		data() {
			return {
				phone: "",
				password: "",
				code: "",
				projectName: "",
				type: 1,
				tips: '',
				canLogin:false,
				codeCanSend:false,
				seconds: 60,
				typeList: [{
					id: 1,
					name: "密码登录"
				}, {
					id: 2,
					name: "验证码登录"
				}]
			}
		},
		methods: {
			changeType(e) {
				this.type = e.id;
			},
			changeCodeSend(e){
				console.log('success');
				this.codeCanSend=true;
			},
			codeChange(text) {
				this.tips = text;
			},
			passwordLogin() {
				if (this.canLogin ==false) {
					uni.$u.toast('请拖动滑块后再登录');
					return;
				} else if (this.phone == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					return;
				} else if (this.password == '') {
					uni.showToast({
						title: "请输入密码",
						icon: "none"
					})
					return;
				} else {
					var data = {
						phone: this.phone,
						password: this.password
					};
					api.doRequest('post', 'login/verify', data).then(res => {
						if (res.statusCode == 200 && res.data.code == 200) {
							uni.showToast({
								title: "登录成功",
								icon: "none"
							})

							uni.setStorageSync('token', res.data.data);
							setTimeout(function() {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 500);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
							this.canLogin=false;
							this.$refs.loginVer.reset();
						}
					})
				}
			},
			verifyLogin() {
				if (this.code == '') {
					uni.showToast({
						title: "请输入验证码",
						icon: "none"
					})
					return;
				} else {
					var data = {
						phone: this.phone,
						code: this.code
					};
					api.doRequest('post', 'login/verifyByCode', data).then(res => {
						if (res.statusCode == 200 && res.data.code == 200) {
							uni.showToast({
								title: "登录成功",
								icon: "none"
							})
							console.log(res.data.data);
							uni.setStorageSync('token', res.data.data);
							setTimeout(function() {
								uni.switchTab({
									url: "/pages/index/index"
								})
							}, 500);
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					})
				}
			},
			getCode() {
				if(this.codeCanSend){
					if (this.$refs.uCode.canGetCode) {
					
						if (this.phone != "") {
					
							var sendData = {
								phone: this.phone
							}
					
					
							uni.showLoading({
								title: '正在获取验证码'
							})
							api.doRequest("post", "login/sendCode", sendData).then(res => {
								//console.log(res);
							})
							setTimeout(() => {
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								uni.showToast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}, 500);
						} else {
							uni.showToast({
								title: "请检查您的手机号",
								icon: 'none'
							})
						}
					
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				}else{
					uni.$u.toast('请拖动滑块后再发送');
				}
				
			},
		},
		inject: ['globalData'],
		onLoad(e) {
			uni.setStorageSync('token', '');
			console.log(uni.getStorageSync('token'));
			const app = getApp();
			this.projectName = this.globalData.name;
		}

	}
</script>

<style>
	.logo {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 50upx;
	}

	.logo image {
		width: 200upx;
		height: 200upx;
	}

	.ring {
		position: relative;
		width: 650upx;
		
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.forget {
		padding: 0 30upx;
		color: #004ea2;
	}

	.loginForm {
		width: 650upx;
		padding-bottom:20upx;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(5px);
		position: relative;
		border-radius: 20upx;
		border: 2px solid #eee;

	}

	.passwordLogin {
		margin-top: 40upx;
	}

	.loginForm .title {
		height: 100upx;
		line-height: 100upx;
		font-size: 20px;
		color: #004ea2;
		text-align: center;
	}

	.loginForm:hover {
		box-shadow: 0 0 50upx #eee;
		border: none;
	}

	.wq-row {
		display: flex;
		width: 580upx;
		align-items: center;
		margin: 20upx auto;
		justify-content: space-between;
	}

	.wq-row input {
		border: 1px solid #ccc;
		height: 70upx;
		border-radius: 10upx;
		width: 440upx;
		background: #fff;
		padding-left: 20upx;
	}
	.verify{
		width:460upx;
	}
	.ring .ringi {
		position: absolute;
		inset: 0;
		border: 2px solid #c0c0c0;
		transition: 0.5s;
	}

	.wq-row .codeIpt {
		width: 210upx;
	}
</style>